<template>
  <el-dialog width="1200px" :title="$t('m.out.pickpop')" :visible.sync="popupVisible" :before-close="close">
    <!-- tool start -->
    <el-form align="left" ref="form" :model="detail" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.pick.pickingtaskcode')">
            <el-input v-model="detail.pickingTask.pickingtaskcode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.out.waveordercode')">
            <el-input v-model="detail.pickingTask.waveordercode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="detail.pickingTask.pickingtype!==2">
          <el-form-item :label="$t('m.in.ordernumber')">
            <!-- 原型上写着：二次分拣的拣货明细不包含订单字段 type=2就是二次分拣 -->
            <el-input v-model="detail.pickingTaskDetail[0].ordercode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.state')">
            <el-input v-model="stateComputed" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.createdate')">
            <el-input v-model="dateComputed" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table start -->
    <el-row>
      <el-col :span="24">
         <el-table
          ref="table"
          stripe
          empty-text
          fit
          tooltip-effect="dark"
          :data="detail.pickingTaskDetail">
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="productspeccode" label="sku"></el-table-column>
          <el-table-column align="center" prop="suppliercode" label="supplierCode"></el-table-column>
          <el-table-column align="center" prop="productname" :label="$t('m.in.productname')"></el-table-column>
          <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')"></el-table-column>
          <el-table-column align="center" prop="tasknumber" :label="$t('m.out.pickingtaskcode')"></el-table-column>
          <el-table-column align="center" prop="locationcode" :label="$t('m.page.location')"></el-table-column>
          <el-table-column align="center" prop="taskleader" :label="$t('m.pick.taskleader')"></el-table-column>
          <el-table-column align="center" prop="stockoutquantity" :label="$t('m.pick.shortageqty')"></el-table-column>
          <el-table-column align="center" prop="quantity" :label="$t('m.out.quantity')"></el-table-column>
          <el-table-column align="center" prop="state" :label="$t('m.state')">
            <template slot-scope="scope">{{scope.row.state|stateFilter(lan)}}</template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- table end -->
    <el-row>
      <el-col :span="24">
        <el-button @click="close">{{$t('m.close')}}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import common from '@/utils/common'
export default {
  name:'picktask-detail-popup',
  props:['popupVisible','detail','date'],
  data(){
    return {

    }
  },
  mounted(){

  },
  computed:{
    stateComputed(){
      let state =  this.detail.pickingTask.state
      let result = ''
      switch(state){
      case 2: result=this.$t('m.pick.state4'); break
      case 3: result=this.$t('m.pick.state5'); break
      case 9: result=this.$t('m.pick.state9'); break
      case 20: result=this.$t('m.pick.state10'); break
      }
      return result
    },
    dateComputed(){
      return common.timestampToTime(this.date)
    }
  },
  filters:{
    stateFilter(val,lan){
      let result = ''
      switch(val){
      case 1: result=lan('m.out.state2'); break
      case 3: result=lan('m.pick.state3'); break
      case 9: result=lan('m.pick.state9'); break
      case 20: result=lan('m.pick.state10'); break
      }
      return result
    }
  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    close(){
      this.$emit('close')
    }
  }
}
</script>